<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <ul id="ul">
    <li>西施</li>
    <li>貂蝉</li>
    <li>昭君</li>
    <li>凤姐</li>
    <li>芙蓉姐姐</li>
  </ul>
  <input type="button" value="按钮" id="btn" />
  <script>
    let ul = document.querySelector('#ul');
    let btn = document.querySelector('#btn');
    ul.addEventListener('mouseover', function () {
      let lis = document.querySelectorAll('#ul li');
      for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function () {
          for (let j = 0; j < lis.length; j++) {
            lis[j].style.backgroundColor = '#fff';
          }
          this.style.backgroundColor = 'red';
        })
      }
    })
    let li = document.createElement('li');
    li.innerHTML = `<li>杨玉环</li>`;
    btn.addEventListener('click', function () {
      ul.insertBefore(li, ul.childNodes[0]);
    })

  </script>
</body>

</html>